import styles from "../../styles/ChatBubble.module.css"
import Image from 'next/image'
import React from "react";
import {apiBase} from "../../service/service";
import filePng from "../../public/image/file.png"

const ChatBubble = (props) => {
  const {senderName, content, time, type, isLocal, isSystem, avatarUrl, onClick} = props
  if (isSystem) {
    return <div className={styles.chatNotice}><span>{content}</span></div>
  }


  let realContent;
  if (type === "TXT") {
    realContent = <span> {content}</span>
  } else if (type === "PIC") {
    realContent = <span><Image onClick={() => onClick(content)} src={content} width={90} height={90}/></span>
  } else if (type === "FILE") {
    const array = content.split(" ");
    const filename = array[0]
    const fileSize = array[1]
    let url = apiBase + array[2]
    url = url.replace(filename, encodeURIComponent(filename))

    realContent = <span className={styles.file}>
      <div><Image src={filePng} width={50} height={50}/></div>
      <span>{filename}</span>
      <div>{fileSize}KB|<a href={url} target={'_blank'}>下载</a></div>
    </span>
  }

  return (
    <div className={isLocal ? styles.chatReceiver : styles.chatSender}>
      <div><Image src={apiBase + avatarUrl} width={40} height={40}/></div>
      <div>{senderName}</div>
      <div>
        <div className={isLocal ? styles.chatReceiverTriangle : styles.chatSenderTriangle}/>
        {realContent}
      </div>
    </div>
  );
}

export default ChatBubble
